import axios from "axios";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { Button, Cell, NavBar } from "react-vant";

const Order = () => {
  const location = useLocation();
  const v = location.state;
  const navigate = useNavigate();
  const list = useSelector((state) => state.personList.list);
  const selectList = list.filter((v) => v.state);
  const list1 = ["A", "B", "C", "D", "E"];
  const [current, setCurrent] = useState([]);
  const handleOrder = async () => {
    // 请求支付
    const resp = await axios.get("/api/pay", {
      params: {
        title: "机票",
        id: Math.random().toString(),
        price: v.atp * selectList.length,
      },
    });
    // console.log(resp.data)
    window.open(resp.data.data)
  };
  return (
    <div>
      <NavBar title="订单"></NavBar>
      <Cell
        title={
          <div>
            {v.dasn}
            {v.dat} 到 {v.aasn}
            {v.aat} {v.dst}-{v.ast}
          </div>
        }
        label={
          <>
            <div>
              {v.asn}|{v.amn}|{v.amt}
            </div>
            <div>
              <div style={{ color: "red" }}>¥:{v.atp}</div>
            </div>
          </>
        }
      ></Cell>

      <h3 style={{ display: "flex", justifyContent: "space-between" }}>
        <span>选择乘车人</span>
        <span onClick={() => navigate("/personList")}>添加</span>
      </h3>

      <div>
        {selectList.map((v, i) => {
          return (
            <div key={i}>
              {v.name}-{v.code}
            </div>
          );
        })}
      </div>

      <h3>选座</h3>
      <Button.Group>
        {list1.map((v, i) => {
          return (
            <Button
              type={current.includes(v) ? "primary" : ""}
              key={i}
              onClick={() =>
                setCurrent((prev) => {
                  if (current.includes(v)) {
                    return current.filter((item) => item !== v);
                  } else {
                    if (prev.length >= selectList.length) {
                      return prev;
                    }
                    return [...prev, v];
                  }
                })
              }
            >
              {v}
            </Button>
          );
        })}
      </Button.Group>

      <Button block type="primary" onClick={() => handleOrder()}>
        提交订单
      </Button>
    </div>
  );
};

export default Order;
